---
import CallToAction from './CallToAction.astro'
import Logo from './Logo.astro'
import { Heading, Link } from 'accessible-astro-components'

/**
 * Footer Component
 *
 * @description A component that displays the footer of the website
 */
const currentYear = new Date().getFullYear()
---

<footer>
  <CallToAction />
  <section class="py-20">
    <Heading level="h2" class="sr-only">Footer</Heading>
    <div class="container grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
      <div class="flex flex-col gap-4">
        <Heading level="h3" size="h6">Theme features</Heading>
        <ul class="flex flex-col gap-2">
          <li><Link href="/accessibility-statement">Accessibility statement</Link></li>
          <li><Link href="/accessible-components">Accessible components</Link></li>
          <li><Link href="/color-contrast-checker">Color contrast checker</Link></li>
          <li><Link href="/markdown-page">Markdown page</Link></li>
          <li><Link href="/mdx-page">MDX page</Link></li>
          <li><Link href="/404-page">404 page</Link></li>
          <li><Link href="/sitemap">Sitemap</Link></li>
        </ul>
      </div>
      <div class="flex flex-col gap-4">
        <Heading level="h3" size="h6">Incluud projects</Heading>
        <ul class="flex flex-col gap-2">
          <li>
            <Link isExternal href="https://accessible-astro-starter.incluud.dev">Accessible Astro Starter</Link>
          </li>
          <li>
            <Link isExternal href="https://accessible-astro-dashboard.incluud.dev">Accessible Astro Dashboard</Link>
          </li>
          <li>
            <Link isExternal href="https://accessible-astro-starter.incluud.dev/accessible-components"
              >Accessible Astro Components</Link
            >
          </li>
          <li>
            <Link isExternal href="https://accessible-astro-docs.incluud.dev">Accessible Astro Docs</Link>
          </li>
          <li>
            <Link isExternal href="https://color-contrast.incluud.dev">Color Contrast Checker</Link>
          </li>
        </ul>
      </div>
      <div class="flex flex-col gap-4">
        <Heading level="h3" size="h6">Developer tools</Heading>
        <ul class="flex flex-col gap-2">
          <li>
            <Link isExternal href="https://chrispederick.com/work/web-developer/">Web Developer Extension</Link>
          </li>
          <li>
            <Link isExternal href="https://accessibilityinsights.io/">Accessibility Insights</Link>
          </li>
          <li>
            <Link isExternal href="https://www.deque.com/axe/devtools/">axe DevTools</Link>
          </li>
          <li>
            <Link isExternal href="https://wave.webaim.org/extension/">WAVE Web Accessibility</Link>
          </li>
          <li>
            <Link isExternal href="https://www.w3.org/WAI/ARIA/apg/patterns/">ARIA Design Patterns</Link>
          </li>
          <li>
            <Link isExternal href="https://aaardvarkaccessibility.com/wcag-plain-english/">WCAG Plain English</Link>
          </li>
        </ul>
      </div>
      <div class="flex flex-col gap-4">
        <Logo loading="lazy" />
        <p class="leading-[1.75]">
          Tip: always test for screen reader support. Press <kbd>⌘</kbd> + <kbd>F5</kbd> to start VoiceOver or <kbd
            >Win</kbd
          >
          + <kbd>Ctrl</kbd> + <kbd>Enter</kbd> for Narrator.
        </p>
        <p>Cute astronaut image by <Link href="https://unsplash.com/@kobbymendez">Kobby Mendez</Link> on Unsplash.</p>
      </div>
    </div>
  </section>
  <section class="py-8">
    <div class="container flex flex-col gap-4 md:flex-row md:justify-between">
      <p>
        &copy; {currentYear} - Starter Theme for <Link href="https://astro.build/">Astro</Link>.
      </p>
      <p>
        Made with ❤️ by <Link href="https://github.com/markteekman">Mark Teekman</Link>. Part of <Link
          href="https://www.incluud.dev">Incluud</Link
        >.
      </p>
    </div>
  </section>
</footer>

<style>
  section {
    border-top: 1px solid var(--border-color-subtle);
  }
</style>
